<template>
	<view>
		<view class="imageScrollCssOut">
			<view v-for="(item,i) in seriesBase" :key="i" class="imageScrollCssIn" hover-class="imageScrollCssInHover"

				@click="toSeriesDetails(i)">
				<image :src="item.imagePath" />
				<text class="title">{{item.worksName}}</text>
			</view>
			<view v-if="(seriesBase.length%2)!=0" class="imageScrollCssIn">
			</view>
			<view v-if="seriesBase.length == 0">
				<text>暂无作品</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			toSeriesDetails(index) {
				uni.navigateTo({
					url: '../seriesDetails/seriesDetails',
					success: res => {
						this.$store.commit("tempSeriesDetails",this.seriesBase[index])
					}
				});
			}
		},
		data() {
			return {
				seriesBase: []
			}
		},
		onLoad(data) {
			uni.request({
				url: this.api.seriesWorks + "getSeries",
				method: 'GET',
				data: data,
				success: res => {
					if (res.data.obj) {
						this.seriesBase = res.data.obj
					}
				},
			});
		}
	}
</script>

<style>
	.title {
		flex: 1;
		text-align: center;
		font-size: 5vw;
		color: #000000;
		/* font-weight: bold; */
	}

	.imageScrollCssOut {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.imageScrollCssInHover {
		color: #007AFF;
	}

	.imageScrollCssIn {
		width: 45%;
		margin: 0 5px 2vh 5px;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.imageScrollCssOut image {
		width: 100%;
		height: 45vw;
		object-fit: cover;
		border: solid 1px;
		border-radius: 50%;
	}
</style>
